<template>
  <div class="mContentB">
    <div class="mContent">
      <div class="content-setting" @contextmenu.prevent="onContextMenu">
        <img :src="items.url" v-for="(items,index) in checkedList" :key="index" alt="" srcset=""
             class="content-setting-item">

        <img :src="m38" alt="" srcset="" @click="handleWindow" class="content-setting-item1">
        <div class="content-setting-item2" v-if="isRightDown" v-click-outside="clickOutSide">
          <div class="content-setting-item3" v-for="(item,index) in list" :key="index">
            <a-checkbox v-model:checked="item.checked" @change="onCheckAllChange" :id="index">
              <div class="content-setting-item4">
                <img :src="item.url" alt="" srcset="" class="content-setting-item20">
                <div class="content-setting-item21">自适应画布</div>
              </div>
            </a-checkbox>
          </div>
        </div>
      </div>

      <img :src="m44" alt="" srcset="" class="content-setting-item377">

    </div>
  </div>

</template>
<script setup lang='ts'>
import {defineComponent} from 'vue';
import {ref} from 'vue'
import {useCommomStore} from "@/pinia/store/commom.pinia"
import m38 from "../../assets/img/m38.png"
import m5 from "../../assets/img/m5.png"
import m2 from "../../assets/img/m2.png"
import m6 from "../../assets/img/m6.png"
import mm from "../../assets/img/mm.png"
import m8 from "../../assets/img/m8.png"
import m40 from "../../assets/img/m40.png"
import m41 from "../../assets/img/m41.png"
import m42 from "../../assets/img/m42.png"
import m44 from "../../assets/img/m44.png"

const storeCommomStore = useCommomStore();
const emits = defineEmits(['handleWindow']);
const isRightDown = ref(false);
const checkedList = ref([]);
const onContextMenu = (event: any) => {
  // 阻止默认的右键菜单
  event.preventDefault();
  isRightDown.value = !isRightDown.value
};
const clickOutSide = () => {
  isRightDown.value = false
};
const handleWindow = () => {
  emits('handleWindow')
  storeCommomStore.setShowHide();
}
const list = ref([
  {
    id: 1,
    url: m5,
    lable: "自适应画布",
    checked: false
  },
  {
    id: 2,
    url: m2,
    lable: "焦点适应",
    checked: false
  },
  {
    id: 3,
    url: m6,
    lable: "画布刷新",
    checked: false
  },
  {
    id: 4,
    url: mm,
    lable: "显示样式",
    checked: false
  },
  {
    id: 5,
    url: m8,
    lable: "外观材质",
    checked: false
  },
  {
    id: 6,
    url: m40,
    lable: "视图",
    checked: false
  },
  {
    id: 7,
    url: m41,
    lable: "爆炸",
    checked: false
  },
  {
    id: 8,
    url: m42,
    lable: "剖切",
    checked: false
  }
]);
const checked = ref(false);
const vClickOutside = {
  beforeMount(el, binding) {
    // 在元素上绑定一个事件监听器
    el.clickOutsideEvent = function (event) {
      // 判断点击事件是否发生在元素外部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果是外部点击，则执行绑定的函数
        binding.value(event);
      }
    };
    // 在全局添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unmounted(el) {
    // 在组件销毁前，移除事件监听器以避免内存泄漏
    document.removeEventListener("click", el.clickOutsideEvent);
  },
};
const onCheckAllChange = (e: any) => {
  console.log(e.target)
  list.value[e.target.id].checked = e.target.checked;
  checkedList.value = list.value.filter((items) => items.checked == true);
  console.log('0------->', checkedList.value);
};
</script>
<style scoped>
.mContent {
  display: flex;
  /* width: 1440px; */
  flex: 1;
  /* height: 900px; */
  background: rgba(243, 249, 255, 1);
  height: calc(100vh - 198px);

}

.mContentB {
  background: rgba(243, 249, 255, 1);
  flex: 1;
}

.content-setting {

  min-width: 50px;
  height: 46px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 auto;
  background-color: white;
  margin-top: 34px;
  position: relative;
}

.content-setting-item {
  width: 28px;
  height: 28px;
  margin-left: 20px;
  cursor: pointer;
}

.content-setting-item1 {
  width: 28px;
  height: 28px;
  margin: 0 20px;
  cursor: pointer;
}

.content-setting-item20 {
  width: 20px;
  height: 20px;
  margin-left: 5px;
}

.content-setting-item21 {
  margin-left: 14px;
  font-size: 12px;
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
}

.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
  background-color: #00aec6;
  border: 2px solid #00aec6;
}

.content-setting-item2 {
  width: 153px;
  border: 1px solid rgba(237, 237, 237, 1);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05);
  position: absolute;
  bottom: -328px;
  left: 0;

}

.content-setting-item4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  top: 2px;
}

.content-setting-item3 {
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 13px;
}

.content-setting-item3:hover {
  background: rgba(230, 248, 250, 1);
}

.content-setting-item377 {
  height: 377px;
  position: absolute;
  bottom: 0;
}
</style>